<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
				list-style: none;
				box-sizing: border-box;
			}
			
			.map {
				display: flex;
				height: 402px;
				width: 402px;
				margin: auto;
				border: 1px solid #000;
				flex-wrap: wrap;
			}
			
			.map>li {
				width: 10px;
				height: 10px;
				border: 1px solid #9a9a9a;
			}
			
			.map>.mark {
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<ul class="map">
			
		</ul>
	</body>
	<script>
		let map = document.querySelector(".map");
		let array2D = [];
		
		/**
		 * 绘制地图（这里简单粗暴，使用双层for循环来创建）
		 */
		function create() {
			for (let row = 0;row < 40;row ++) {
				let array = [];
				for (let column = 0;column < 40;column ++) {
					let li = document.createElement("li");
					map.appendChild(li);
					array.push(li);
				}
				array2D.push(array);
			}
		}
		
		/**
		 * 根据x和y坐标，在array2D中找到li，然后添加mark的class
		 * @param {Number} x x坐标
		 * @param {Number} y y坐标
		 */
		function mark(x,y) {
			let li = array2D[x][y];
			if (li) {
				li.classList.add("mark");
			}
		}
		
		create();
		mark(0,0);
		mark(9,9);
		
		
	</script>
</html>